<template lang="html">
<div class="banner-management-page">
	<Card :dis-hover="true" class="main-card">
		<p slot="title">
			<Icon type="images"></Icon> Banner管理
		</p>
		<div slot="extra">

			<Input v-model="searchKey" class="search-input" icon="search" placeholder="Banner名称、类型" style="width: 300px" @keydown.native.enter="doSearch"></Input>
			<Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

			<Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true">新增</Button>
		</div>
		<div class="no-data" v-if="bannerList.length === 0">暂无数据</div>

		<Row :gutter="10">
			<Col span="6" v-for="banner in bannerList" :key="banner.uuid">
			<Card class="banner-card" :title="banner.name">
				<div class="banner-preview-box">
					<div class="action-box">
						<Button type="text" icon="edit" @click="editBanner(banner)"></Button>
						<Button type="text" icon="trash-b" @click="deleteBanner(banner)"></Button>

					</div>
					<img :src="postUrl.imgPath + banner.img_url" alt="">
				</div>
				<Row class="card-footer">
					<Col span="24">{{banner.name}}</Col>
					<Col span="12">类型：{{banner.type_ame}}</Col>
					<Col span="12" style="text-align:right">排序：{{banner.orders}}</Col>
					<Col span="10">是否显示：
					<Icon type="checkmark-circled" size="14" color="#00a854" v-if="banner.is_show == '1'"></Icon>
					<Icon type="close-circled" size="14" color="#f04134" v-else></Icon>

					</Col>
					<Col span="14" style="text-align:right">跳转类型：{{banner.link_type_name}}</Col>
					<Col span="24" style="text-align:right;padding:5px 0;color:#999">{{banner.createtime}}</Col>

				</Row>
			</Card>
			</Col>

		</Row>

		<transition name="fade">
			<div class="loading-cover" v-if="pageLoading">
				<Spin fix size="large"></Spin>
			</div>
		</transition>
		<div class="page-ctrl"  v-if="pageCount">
			<Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
			</Page>
		</div>
	</Card>
	<Modal :mask-closable="false" :title="selectBanner ? '编辑Banner':'新增Banner'" v-model="showModal" :loading="modalLoading" @on-ok="clickOK()" class="banner-modal">
        <header-img-uploader :img-upload-path="postUrl.uploadBannerImgUrl" :upload-img-data="uploadImgData" @on-upload-success="uploadImgSuccess" :show-img-path="uploadImgCallbackPath" class="auto-size-img-upload" icon="image" suggest="建议尺寸 16:9">
        </header-img-uploader>

		<Form :model="bannerForm" ref="bannerForm" :rules="bannerFormRules">
			<FormItem label="名称" prop="name">
				<Input v-model="bannerForm.name" placeholder="请输入Banner名称"></Input>
			</FormItem>
            <FormItem label="Banner类型" prop="app_media_banner_type_code">
                <Select v-model="bannerForm.app_media_banner_type_code" :transfer="true">
                    <Option value="AUDIOTYPE">分类Banner</Option>
                    <Option value="BANGDAN">榜单Banner</Option>
                    <Option value="INDEX">首页Banner</Option>
                </Select>
			</FormItem>
            <FormItem label="跳转类型" prop="link_type_code">
                <Select v-model="bannerForm.link_type_code"  placement="top" :transfer="true" @on-change="linkTypeCodeChange">
                    <Option value="AUDIO_TYPE">歌曲分类</Option>
                    <Option value="LIVE_CONCERT">音乐会直播</Option>
                    <Option value="LIVE_MASTER">大师直播</Option>
                    <Option value="NEWS">资讯</Option>
                    <Option value="PLAYLIST">歌单</Option>
                    <Option value="SONG">歌曲</Option>
                    <Option value="VIDEO">录播</Option>
                    <Option value="WEB">网页</Option>
                </Select>
			</FormItem>
			<transition name="fade" mode="out-in">
				<FormItem label="跳转到链接" prop="link_url" v-if="bannerForm.link_type_code == 'WEB'" :key="'web'" >
					<Input v-model="bannerForm.link_url" placeholder="请填入链接地址"></Input>
				</FormItem>
				<FormItem label="跳转到" prop="link_detail_id" v-else :key="'other'">
					<Select v-model="bannerForm.link_detail_id"  placement="top" :transfer="true" placeholder="请选择一个跳转目标" :disabled="linkDetailTypeList.length === 0">
						<Option :value="detailType.uuid" v-for="detailType in linkDetailTypeList" :key="detailType.uuid">{{detailType.name}}</Option>
					</Select>

				</FormItem>
			</transition>
			<FormItem label="展示顺序" prop="orders">
				<InputNumber v-model="bannerForm.orders"></InputNumber>
				<span style="font-size:12px;color:#999;margin-left:5px;">越大越靠后</span>
			</FormItem>
			<FormItem label="在APP内显示" prop="isShow">
				<i-switch v-model="bannerForm.isShow"></i-switch>
			</FormItem>
		</Form>
	</Modal>
</div>
</template>

<script src="./app-banner.js">
</script>

<style lang="scss" src="./app-banner.scss">
</style>
